<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.dom</title>


</head>

<body>
    <!-- 
#div 
div#div

 -->
    <form action="#" name="myForm">
        <input name="username" type="text">
    </form>
    <div id="div">
        <ul>
            <!-- li.a  .a  -->
            <li class="a">北京</li>
            <li class="a">上海</li>
            <li>广州</li>
        </ul>
    </div>

    <script>
        /*
         伪数组:  不是一个真正的数据 但是有数组的结构 arguments
         将伪数组转为真实数组：Array.from(伪数组)
        */
        // var arr = {
        //     0:"北京",
        //     1:"上海",
        //     2:"广州",
        //     length:3
        // }

        // console.dir(Array.from(arr));
        // Array.from(arr).forEach(function(value){
        //      console.log(value);
        // })
        /*
         dom操作：获取dom节点/元素/标签
         基本的三种获取方式
         方式一获取：通过id获取
         方式二获取：通过类名获取
         方式三获取：通过标签名来获取
         灵活获取的两种方式[推荐使用]
         querySelector("样式选择器")  只获取一个节点
         querySelectorAll("样式选择器") 返回一个节点集合
         特殊获取节点的方式： 
           id属性本身就在dom中 即为本身就可以直接当成节点使用
           body 节点直接在dom中
           表单的name属性 也在dom中
           表单元素的name属性  在表单节点中
        */
        console.dir(document);
        // 通过id获取元素
        var divNode = document.getElementById("div")
        console.dir(divNode);
        // 通过类名获取元素
        var aNodes = document.getElementsByClassName("a");
        console.dir(aNodes);
        console.dir(Array.from(aNodes));
        // 通过标签获取元素
        var liNodes = document.getElementsByTagName("li")
        console.dir(liNodes);

        var divNode2 = document.querySelector("div#div");
        console.dir(divNode2);

        var liNodes2 = document.querySelectorAll("li.a")
        console.dir(liNodes2);
        console.dir(div);
        // 获取body节点
        console.dir(document.querySelector("body"));
        console.dir(document.body);
        // 获取表单节点
        console.dir(document.querySelector("form"));
        console.dir(document.myForm);
        // 获取表单元素的username节点 
        console.dir(document.querySelector("form input"));
        console.dir(document.myForm.username);
    </script>


</body>

</html>